<script setup>
import {useRouter} from "vue-router";
import * as Auth from "@/utils/auth.js";
import {tokenInfo} from "@/api/user.js";
import {ref} from "vue";
import {getUserLocal} from "@/utils/auth.js";
const orderQuantity = ref(0)

const login = ref(false)
const user = ref({})

const router = useRouter();
if (Auth.getTokenLocal()) {
  const token = {
    token: Auth.getTokenLocal()
  };
  tokenInfo(token).then(result => {
    console.log(result)
    if (result.data.data.isLogin === true) {
      login.value = true
      user.value = getUserLocal()
      console.log(user.value)
    }
  })
} else {
  console.log('没有token')
}
</script>

<template>
  <div>
    <div class="user" v-show="login">
      <div style="padding: 10px 0">
        <van-image height="8vh" width="8vh" :src="user.avatar" round style="padding-left: 10px" fit="cover"/>
        <span class="item_u">{{ user.uname }}</span>
        <span class="item_u1" @click="$router.push('/address')">我的地址</span>
      </div>
    </div>
    <div class="user" @click="$router.push('/login')" v-show="!login">
      <div style="padding: 10px 0">
        <van-image height="8vh" width="8vh" src="/vite.svg" round style="padding-left: 10px" fit="cover"/>
        <span class="item_u">请登录</span>
      </div>
    </div>

    <div>
      <van-grid :border="false">
        <van-grid-item icon="goods-collect-o" text="想要"/>
        <van-grid-item icon="passed" text="我有"/>
        <van-grid-item icon="eye-o" text="足迹"/>
        <van-grid-item icon="add-o" text="订阅"/>
      </van-grid>
    </div>
    <div>
      <van-cell-group inset id="order">
        <van-cell title="订单" :value="orderQuantity" is-link>
        </van-cell>
        <van-cell title="钱包" :value="orderQuantity" is-link/>
        <van-cell title="客服" is-link/>
        <van-cell title="退出登录" v-show="login"/>
      </van-cell-group>
    </div>
  </div>
</template>

<style lang="less" scoped>
.user {
  position: relative;
  background-color: #fafafa;
  border: 26px solid #fff;
  border-radius: 40px;

  .item_u {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    line-height: 8vh;
    height: 8vh;
    position: absolute;
    top: 6%;
    padding-left: 14px;
  }

  .item_u1 {
    display: inline-block;
    font-size: 10px;
    position: absolute;
    right: 16%;
    top: 35%;
    padding-left: 14px;
    color: lightskyblue;
  }
}

van-grid-item {
  deep(.van-grid-item__content--center) {
  background-color: #fafafa;
}
}

#order .van-cell {
  background-color: #fafafa;

}
</style>
